<template>
    <div style="background: #f1f1f1">
        <div style="float: left; width: 18%">
            <div style="width: 100%; float: left">
                <el-tabs
                    type="card"
                    style="margin: 0 8px 0 0; background-color: white"
                    :style="{ height: heightZ }"
                >
                    <el-tab-pane label="机构树">
                        <radioOrgTree @init="init" ref="dialogRadioOrgTree" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div style="float: left; width: 82%">
            <el-row
                style="
                    background-color: white;
                    padding-right: 8px;
                    margin-bottom: 8px;">
                <el-col :span="24">
                    <div style="text-align: right; margin: 8px 0 8px 0">
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-refresh"
                            @click="initData"
                            >&nbsp;刷新
                        </el-button>
                    </div>
                </el-col>
            </el-row>
            <vxe-table
                border
                header-align="center"
                ref="mytable"
                highlight-hover-row
                :loading="loading"
                :height="heightY"
                :data="articlesData"
                @cell-dblclick="checkOrg"
                @checkbox-all="selectAllEvent"
                @checkbox-change="selectChangeEvent"
            >
                <vxe-table-column
                    field="xuanzhong"
                    type="checkbox"
                    width="60"
                    align="center"
                    fixed="left"
                >
                </vxe-table-column>
                <vxe-table-column
                    field="ORG_NAME"
                    title="机构名称"
                    show-overflow="title"
                    width="505"
                    align="center"
                    fixed="left"
                    sortable
                ></vxe-table-column>
                <vxe-table-column
                    field="ORG_JGINCITY"
                    title="所在地市"
                    align="center"
                    width="220"
                    sortable
                ></vxe-table-column>
                <vxe-table-column
                    field="ORG_LSGX"
                    title="隶属关系"
                    align="center"
                    width="200"
                    sortable
                ></vxe-table-column>
                <vxe-table-column
                    field="ORG_JGJB"
                    title="机构级别"
                    align="center"
                    width="280"
                    sortable
                ></vxe-table-column>
                <vxe-table-column
                    field="ORG_JGLB"
                    title="机构类别"
                    align="center"
                    width="280"
                    sortable
                ></vxe-table-column>
                <template #empty>
                    <span style="color: red">
                        <el-image
                            :src="image1"
                            style="width: 200px; height: 200px"
                        ></el-image>
                        <p>未查询到任何数据！</p>
                    </span>
                </template>
            </vxe-table>
        </div>
    </div>
</template>

<script>
import radioOrgTree from "@/views/students/organization/common/radioOrgTreelazy";
import {getOrgChildList} from "@/api/students/organization/organization";

export default {
    name: "organization",
    components: {
        radioOrgTree,
    },
    props: {},
    data() {
        return {
            isEnableEditOrg:
                JSON.parse(
                    sessionStorage.getItem(`userInfo`)
                ).isEnableEditOrg.toString() || "",
            isHeaderOrgCode: "",
            heightY: window.innerHeight - 180 + "px",
            heightZ: window.innerHeight - 118 + "px",
            articlesData: [],
            loading: false,
            selectedNode: "",
            multipleSelection: [],
            image1: require("@/views/img/null.png"),
        };
    },
    mounted() {
        this.init("");
        this.$refs.dialogRadioOrgTree.flag = 1;
    },
    methods: {
        init(node) {
            console.log(node,"node");
            this.multipleSelection = [];
            if (node == null || node === "") {
                this.articlesData = [];
                this.selectedNode = "";
            } else {
                this.loading = true;
                this.selectedNode = node;
                const userInfo =
                    JSON.parse(sessionStorage.getItem(`userInfo`)) || {};
                const personJsons = {
                    parentId:node.parentId || '0',
                };
                getOrgChildList(personJsons)
                    .then((response) => {
                        console.log(response,"response");
                        this.articlesData = response.resultdata;
                        this.loading = false;
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            }
        },
        checkOrg({ row }) {
            let param = {
                headCode: this.isHeaderOrgCode,
                row: this.articlesData[0],
            };
            this.$refs.dialogorganizationAdd.init("机构修改", row, param);
        },
        selectAllEvent({ checked, records }) {
            this.multipleSelection = records;
        },
        selectChangeEvent({ records }) {
            this.multipleSelection = records;
        },
        // 弹出页面关闭后刷新页面
        onClosed() {
            this.init(this.selectedNode);
            this.$refs.dialogRadioOrgTree.requestNewData();
        },
        initData() {
            this.onClosed();
            this.multipleSelection = [];
        },
    },
};
</script>

<style scoped>
.el-col {
    margin: 3px 0 3px 0;
}

.el-tree {
    min-width: 98%;
}

.el-table {
    font-size: 12px;
}

.el-checkbox {
    display: block;
}

.el-table >>> .warning-row {
    background-color: #2f75b1;
}

.avue-view {
    padding-bottom: 10px;
}

.tree {
    overflow-x: hidden;
}

.ltp-iftable {
    width: 100%;
}

.ltp-iftable th {
    width: 100px;
    text-align: right;
}

.ltp-searchtable {
    width: 100%;
}

.ltp-searchtable th {
    font-weight: normal;
    text-align: right;
}

.ltp-searchtable tr {
    height: 50px;
}

>>>.vxe-table--render-default .vxe-table--header{
    height: 45px;
}

/deep/ .vxe-table .vxe-body--column:not(.col--ellipsis) {
    padding: 3px 0;
}

/deep/ .vxe-table .vxe-footer--column:not(.col--ellipsis) {
    padding: 3px 0;
}

/deep/ .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 3px 0;
}
>>>.vxe-cell--title{
  font-size: 14px;
}

>>>.vxe-table--render-default .vxe-cell{
  height: 35px;
  line-height: 35px;
}
>>>.vxe-header--row{
  height: 40px;
}
</style>
